<!--
        *前台会员中心地址管理列表
        * 
        *
        * @author     yuanxi
        * @version    2018-02-28 18:45   
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>收货地址</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/public/static/homes/css/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/public/static/homes/css/common.css" rel="stylesheet"/>
    <link href="/public/static/homes/css/uc.css" rel="stylesheet"/>
    <style>
        .yc{
            display: none;
        }
        .xs{
            display: block;;
        }
    </style>
</head>
<body>
    <!--头部-->
    
     {:widget("Cate/header")}

    <div class="wrapper uc-router">
        <ul>
            <li><a href="">首页</a></li>
            <li><span class="divider"></span></li>
            <li><span>会员中心</span></li>
            <li><span class="divider"></span></li>
            <li><span>地址管理</span></li>
        </ul>
    </div>

    <div class="wrapper">
        <div class="uc-main clearfix" >
            {:widget("Cate/left")}
            <div class="uc-content">
                <div class="uc-panel">
                    <div class="uc-bigtit">收货地址</div>
                    <div class="uc-panel-bd">

                            

                            <div class="address-list">

                                

                                {foreach name="data" item="rows"}    
                                {if condition="($rows.status eq 1)"}
                                <div class="col col-4">
                                    <div class="item active" name="{$rows.id}">
                                        <div class="action">
                                            <div class="fl"><a href="/address/edit/id/{$rows.id}">修改</a><a href="/address/delete/id/{$rows['id']}" class="del yc">删除</div>
                                            <div class="fr"><a class="setdft" href="javascript:;">设为默认</a></div>

                                        </div>
                                        <div class="info">
                                            <div class="info-item name ellipsis">{$rows.uname}(收)</div>
                                            <div class="info-item address">{$rows.adds}{$rows.site}</div>
                                            <div class="info-item tel ellipsis">{$rows.phone}</div>
                                        </div>
                                    </div>
                                </div>
                                {else/}
                                <div class="col col-4">
                                    <div class="item" name="{$rows.id}">
                                        <div class="action">
                                            <div class="fl"><a href="/address/edit/id/{$rows.id}">修改</a><a href="/address/delete/id/{$rows['id']}" class="del xs">删除</a></div>
                                            <div class="fr"><a class="setdft" href="javascript:;">设为默认</a></div>

                                        </div>
                                        <div class="info">
                                            <div class="info-item name ellipsis">{$rows.uname}(收)</div>
                                            <div class="info-item address">{$rows.adds}{$rows.site}</div>
                                            <div class="info-item tel ellipsis">{$rows.phone}</div>
                                        </div>
                                    </div>
                                </div>
                                {/if}
                                {/foreach}
                                <div class="confirm-address clearfix">
                                 <div class="col col-4">
                                    <a class="itemxx va-m-box ta-c add" id="items">
                                        <div class="add-new">
                                            <span class="ico"><i class="iconfont icon-tianjia"></i></span>
                                            <div class="label">添加收货地址</div>
                                        </div>
                                    </a>
                                </div>
                                </div>
                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
        <!--脚部-->
    <div class="fatfooter">

    </div>
<!--脚部-->
    <div id="addressform" style="display:none" class="layer-address">
        <form action="/address/insertaddress" method="post">
            <div class="control-group">
                <div class="hd">
                    收货人姓名：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="uname" id="">
                </div>
            </div>
            <div class="control-group">
                <div class="hd">
                    联系电话：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="phone" id="">
                </div>
                
            </div>
            <div class="control-group">
                <div class="hd vat">
                    所在地区：
                </div>
                <div class="bd">
                    <select id="sid" class="ui-txtin ui-txtin-thin" style="width: 180px;" name="">
                        <option value="" class="ss">选择省</option>
                    </select>
                    <input type="hidden" name="adds">
                    <div class="mt10">
                        <input class="ui-txtin ui-txtin-thin" style="width: 560px;" type="text" name="site" id="" placeholder="请填写具体地址，不需要重复填写省/市/区">
                    </div>
                </div>
            </div>
            <!-- <div class="control-group">
                <div class="hd vat">
                    邮政编码：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="" id="">
                </div>
            </div> -->
            <div class="control-bottom clearfix">
                <button class="fl btn ui-btn-theme" id="ress">保存</button><a href="" class="fr btn ui-btn cancle">取消</a>
            </div>
        </form>
    </div>
</body>
 <script src="/public/static/homes/js/jquery.js"></script>
<script type="text/javascript" src="/public/static/bs/js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="/public/static/homes/js/icheck/style.css"/>
<script src="/public/static/homes/js/icheck/icheck.min.js"></script>
<script src="/public/static/homes/js/layer/layer.js"></script>
<script src="/public/static/homes/js/global.js"></script>

<script>
    //第一级数据
    $.ajax({
        'url':'/address/address',//请求地址
        'type':'get',//类型
        'aysnc':true,
        'data':{upid:0},//附加参数
        'dataType':'json',//响应数据类型
        success:
        function(data){
            //遍历
            for(var i=0;i<data.length;i++){
                $(".ss").attr("disabled",true);
                //1.把遍历出来的数据添加到option标签里
                o='<option value="'+data[i].id+'">'+data[i].name+'</option>';
                //2.把带有数据的option选项内部插入到 id值是sid的select里
                $("#sid").append(o);
            }
        },
        error:
        function(){
            alert('Ajax响应失败');
        }
    });

    //Ajax 其他级别
    //live 绑定事件和事件处理函数
    $("select").live('change',function(){
        ob=$(this);
        //清除其他累积数据
        ob.nextAll("select").remove();
        //获取上一级别id(当做其他级别upid)
        upid=ob.val();
        $.ajax({
        'url':'/address/address',//请求地址
        'type':'get',//类型
        'aysnc':true,
        'data':{upid:upid},//附加参数
        'dataType':'json',//响应数据类型
        success:
        function(data){
            //创建select
            select=$("<select></select>");
            //内部追加
            select.append("<option value='' class='mm'>--请选择--</option>");
            // alert(data);
            if(data.length>0){
            //遍历
            for(var i=0;i<data.length;i++){
                //1.把遍历出来的数据添加到option标签里
                o='<option value="'+data[i].id+'">'+data[i].name+'</option>';
                //2.把带有数据的option选项内部插入到 创建好的select里
                select.append(o);
            }
            //追加select
            ob.after(select);
            $(".mm").attr("disabled",true);
            }
        },
        error:
            function(){
                alert('Ajax响应失败');
            }
        });
    });

    //提交获取选中数据
    $("#ress").click(function(){
        arr=[];
        //遍历select
        $("select").each(function(){
            //获取选中数据
            adds=$(this).find("option:selected").html();
            arr.push(adds);
        });
        //赋值给隐藏域
        $("input[name='adds']").val(arr);
    })
</script>
<script>
//这里不使用自带按钮，因为设计按钮较特殊，不准备作为通用样式
$('.confirm-address .edit,.confirm-address .add').on('click',function () {
    layer.open({
        type: 1,
        skin: 'layui-layer-seaing',
        title: '标题',
        area: ['720px', 'auto'],
        content: $('#addressform')
        //btn: ['按钮一', '按钮二']
    });
});
$(document.body).on('click','.layer-address .cancle',function () {
    layer.closeAll();
    return false;
})

//
function juggeAddressNum () {
    var col=$('.confirm-address .col'),
    cH=col.height();
    $('.confirm-address').height(cH)
    if (col.length>3) {
        $('.confirm-address-bar').show();
    }
    else {
        $('.confirm-address-bar').hide();
    }
}
juggeAddressNum();
zAction.add({
    'drop':function () {
        $('.confirm-address').height('auto')
        var h=$('.confirm-address').height()
        juggeAddressNum();
        $('.confirm-address').animate({height: h}, 300);
        $(this).parent().remove();
    }
});


//选中地址
    $('.item').click(function(){
        o=$(this);
        uid = $(this).attr('name');
        // alert(uid);
         $.get("/address/editaddress",{uid:uid},function(data){
          if (data == 1) {
              o.parents('.address-list').find('.del').attr("class","del xs");
              o.find('.del').attr("class","del yc");
              $('.item').attr('class','item');
              o.attr('class','item active');
          };
        });
        
    });
    
</script>